<style lang="postcss" scoped>
    .home-container {
    }
</style>
<template>
    <section class="home-container">
        <MasterPage title="用户列表">
            <div slot="title-icon">
                <Icon type="ios-game-controller-b"/>
            </div>
            <div slot="searchContent" class="search-content-slot">
                <Form :model="query" :label-width="80">
                    <Row>
                        <Col span="8">
                            <FormItem label="账号名称：">
                                <Input v-model="query.username" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="账号编码：">
                                <Input v-model="query.usercode" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="真实名称：">
                                <Input v-model="query.realname" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="search">
                <Button type="info" @click="beforeQuery()" icon="ios-search">查询</Button>
            </div>
            <div slot="btns">
                <Button type="primary" icon="md-add" @click="modalShow = !modalShow">添加</Button>
            </div>
            <div slot="paddingContent">
                <Table :columns="columns" :data="userList">
                    <template slot-scope="{ row, index }" slot="action">
                        <Icon title="edit" size="16" type="ios-create-outline" style='cursor: pointer'
                              @click="editRowData(row,index)"/>
                        &nbsp;
                        <Icon title="del" size="18" type="ios-trash-outline" style='cursor: pointer'
                              @click="delRowData(row,index)"/>
                    </template>
                </Table>
            </div>
            <div slot="pager">
                <Page :total="this.pageInfo.totalCounts" :page-sizer="pageInfo.pageSize" :current="pageInfo.pageIndex"
                      :page-size-opts=[10,20,30,50,100,200] @on-change="changePage"
                      @on-page-size-change="changePageSize"
                      show-total show-elevator show-sizer>共&nbsp;{{
                    this.pageInfo.totalCounts }}&nbsp;條
                </Page>
            </div>
        </MasterPage>
        <Modal
                v-model="modalShow"
                title="账号信息"
                :mask-closable="false"
                width="600px">
            <Card>
                <Form ref="users" :model="User" :rules="ruleValidate" :label-width="80">
                    <Row>
                        <Col span="11">
                            <FormItem label="账号名称" prop="username">
                                <Input v-model="User.username" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                        <Col span="2">
                        </Col>
                        <Col span="11">
                            <FormItem label="账号密码" prop="password">
                                <Input v-model="User.password" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="11">
                            <FormItem label="真实名称" prop="realname">
                                <Input v-model="User.realname" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                        <Col span="2">
                        </Col>
                        <Col span="11">
                            <FormItem label="用户编码" prop="usercode">
                                <Input v-model="User.usercode" placeholder="Enter something..."></Input>
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </Card>
            <div slot="footer">
                <Button size="large" type="text" @click="handleReset('users')">取消</Button>
                <Button size="large" type="primary" @click="handleSubmit('users')">确定</Button>
            </div>
        </Modal>
    </section>
</template>
<script>
    import MasterPage from '@/components/Master'
    import {User} from '../../assets/js/class';
    import {getUsers,addUser,delOneUser} from '../../assets/js/service.business';
    import {mapActions, mapGetters} from "vuex";

    export default {
        components: {
            MasterPage
        },
        data() {
            return {
                ruleValidate: {
                    username: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    realname: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ],
                    usercode: [
                        {required: true, message: 'The name cannot be empty', trigger: 'blur'}
                    ]
                },
                modalShow: false,
                columns: [
                    {
                        title:'序号',
                        type: 'index',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return h('span', params.index + (this.pageInfo.pageIndex- 1) * this.pageInfo.pageSize + 1);
                        }
                    },
                    {
                        title: '用户名称',
                        key: 'username',
                    },
                    {
                        title: '密码',
                        key: 'password',
                    },
                    {
                        title: '用户编码',
                        key: 'usercode',
                    },
                    {
                        title: '真实名称',
                        key: 'realname',
                    },
                    {
                        title: '创建人',
                        key: 'creater',
                    },
                    {
                        title: '创建时间',
                        key: 'createtime',
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                User: new User(),
                userList: [],
                pageInfo: {
                    totalCounts: 0,
                    pageSize: 10,
                    pageIndex: 1,
                    totalArr: [],
                    dataArr: []
                },
                query: {
                    username: null,
                    usercode: null,
                    realname: null
                }
            }
        },
        computed: {
            ...mapGetters({
                devices: 'devices',
                menuList: 'menuList',
                deviceTreeSelect: 'deviceTreeSelect'
            })
        },
        methods: {
            ...mapActions({
                getAllDeviceTree: 'asyncGetAllDeviceTree'
            }),
            editRowData(row, index) {
                this.User = row;
                this.modalShow = true;
            },
            delRowData(row, index) {
                delOneUser(row.guid).then((res) => {
                    if (0 == res.code) {
                        this.$Message.success(res.message);
                        this.queryDeviceType()
                    } else
                        this.$Message.warning(res.message);
                }).catch((res) => {
                    this.$Message.error(res.message);
                });
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        addUser(this.User).then((res) => {
                                if (0 == res.code) {
                                    this.$Message.success(res.message);
                                    this.queryDeviceType();
                                    this.$refs[name].resetFields();
                                    this.modalShow = false;
                                } else
                                    this.$Message.warning(res.message);
                            }
                        ).catch((res) => {
                            this.$Message.error(res.message);
                        });
                    }
                })

            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.modalShow = false;
            },
            normalizer(node) {
                //去掉children=[]的children属性
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.label,
                    children: node.children
                }
            },
            beforeQuery() {
                this.query.pageIndex = 1;
                this.queryDeviceType();
            },
            queryDeviceType() {
                getUsers(this.query).then((res) => {
                    if (0 == res.code) {
                        this.userList = res.data.list;
                        var _start = (this.pageInfo.pageIndex - 1) * this.pageInfo.pageSize;  //pageIndex 第几页  pageNum:每页几条数据
                        var _end = this.pageInfo.pageIndex * this.pageInfo.pageSize;
                        this.pageInfo.dataArr = this.pageInfo.totalArr.slice(_start, _end);
                        this.pageInfo.totalCounts = res.data.total;
                    }
                });
            },
            changePage(value) {
                this.pageInfo.pageIndex = value;
                var _start = (value - 1) * this.pageInfo.pageSize;
                var _end = value * this.pageInfo.pageSize;
                this.pageInfo.dataArr = this.pageInfo.totalArr.slice(_start, _end);
                this.query.pageIndex = value;
                this.queryDeviceType();
            },
            changePageSize(size) {
                this.query.pageSize = size;
                this.queryDeviceType();
            }
        },
        mounted() {
            this.beforeQuery();
        },
        created() {
        }
    }
</script>
